<template>
  <div class="content">
    <canvasfont />
    <!-- user -->
    <usermanage v-if="usermanage" />
    <!-- <changepassword/> -->
    <!-- <userpermissions/> -->
    <!-- 提示框 -->
    <!-- 蒙版 -->
    <div class="mask" v-if="maskframe"></div>
    <div class="corpmask" v-if="corpmask"></div>
    <relogin v-if="relogin" @childClick="reloginClick" />
    <cropimage
      v-if="cropimage"
      :cropimg="cropimageimg"
      @cropimage="picturetoolcropimage"
    />
    <illuminateimage
      v-if="illuminateimage"
      :illuminate="illuminateimageimg"
      @illuminateimage="picturetoolilluminateimage"
    />
    <stagetooltip v-if="stagetooltip" @childClick="stagetooltipchildClick" />
    <stagetooltipnewmodel
      v-if="stagetooltipnewmodel"
      @childClick="stagetooltipnewmodelchildClick"
    />
    <stagetooltipsave
      v-if="stagetooltipsave"
      @childClick="stagetooltipsavechildClick"
    />

    <stagetooltipdel
      v-if="stagetooltipdel"
      :stagetooltipcon="stagetooltipcon"
      @childClick="stagetooltipdelchildClick(arguments)"
    />
    <stagetoolload v-if="loadingframe" @interrupt="loadinterrupt" />
    <stagetooltextload v-if="textloadingframe" />
    <!-- 分类管理 -->
    <sortmanage
      :close="sortmanageoff"
      :sortmanagetext="sortmanagelist"
      :parentId="parentId"
      v-if="sortman"
      @childByValue="sortmanagechildByValue"
      @guanbiByValue="sortmanageguanbiByValue"
      @submitbox="sortmansubmitbox"
    />
    <!-- 创建舞台 -->
    <!-- 头部 -->
    <compileTop
      :title="headline"
      @save="compileTopsaveValue"
      @historyprocess="historyprocess"
      @layerstool="layerstool"
      :process="process"
      :online="online"

    />
    <!-- 内容 ---------------------------------------------------------->
    <div class="con">
      <div class="con_left">
        <!-- 内容——左——列1 -->
        <div class="material_tit">
          <div
            class=""
            v-for="(v, i) in materialTit"
            :key="i"
            @click.stop="materialTitClick(i)"
          >
            <div
              class="img_div"
              :style="{ background: v.select ? '#2b2b2b' : 'transparent' }"
            >
              <img v-if="v.select" :src="v.opt" alt="" />
              <img v-else :src="v.img" alt="" />
            </div>
            <p :class="v.select ? 'active' : ''">{{ v.tit }}</p>
          </div>
        </div>
        <!-- 内容——左——列2 -->
        <div
          class="material_list"
          :style="
            sortmanlist
              ? 'background:#f4f4f4;box-shadow:0 0 0 transparent'
              : 'background:#fff'
          "
        >
          <!-- 分类 -->
          <div
            class="list_classify"
            v-if="rightmodelseachbox || rightpicseachbox || rightlogoseachbox"
          >
            <p class="list_p active" @click.stop="materialAll()">{{ con }}</p>
            <p
              v-for="(v, i) in materialListTit"
              :key="i"
              @click.stop="materialListTitClick(i)"
              :class="['list_p', v.select ? 'active' : '']"
              :style="
                v.border
                  ? 'border-bottom:2px solid #2b2b2b'
                  : 'border-bottom:2px solid transparent'
              "
            >
              {{ v.tit }}
            </p>
          </div>
          <!-- 添加按钮  -->
          <div
            v-if="addtextbutton"
            class="list_addbot clickdiv"
            :style="{
              'margin-top':
                rightpicseachbox || rightmodelseachbox || rightlogoseachbox
                  ? ''
                  : '46px',
            }"
            @click="addmaterialClick"
          >
            <p>+ 添加{{ addbot }}</p>
          </div>
          <righttextbottom
            v-if="addtextbut"
            @childValue="righttextbottomchildValue"
          />
          <rightpicboxbottom
            v-if="addpicboxbut"
            @childValue="rightpicboxbottomchildValue"
          />
          <rightdatabottom
            v-if="adddatabut"
            @childValue="rightdatabottomchildValue"
          />
          <rightmodelseach
            v-if="rightmodelseachbox"
            :modelListSearch="modelListSearch"
            :classifytem="classifytem"
            @searchVal="modelListSearchVal"
            @searchALLVal="modelSearchALLVal"
            @searchtext="modelSearchText"
          />
          <rightpicseach
            v-if="rightpicseachbox"
            :picListSearch="picListSearch"
            :classifypic="classifypic"
            @searchval="picsearchval"
            @searchallval="picSearchALLVal"
            @searchtext="picSearchText"
          />
          <rightlogoseach
            v-if="rightlogoseachbox"
            :logoListSearch="logoListSearch"
            :classifylogo="classifylogo"
            @searchval="logosearchval"
            @searchALLVal="logoSearchALLVal"
            @searchtext="logoSearchText"
          />
          <rightlist
            v-if="listbox"
            :scrollTop="scrollTop"
            :rightlistheight="rightlistheight"
            :rightlistList="rightlistList"
            :rightlistdel="rightlistdel"
            :classifytem="classifytem"
            @TemplateList="materialclassitychildByImg"
            @TemplateListDel="TemplateListdelchildByImg"
            @TemplateListCon="TemplateListconchildByImg"
            @TemplateListPage="TemplateListPage"
            @scroll="rightListscroll"
          />
          <!-- @TemplateListnewpage="TemplateListnewpagechildByImg" -->
          <!-- @TemplateListcache="TemplateListCachechildByImg" -->
          <!-- @TemplateListSave="TemplateListSavechildByImg" -->
          <rightpiclist
            v-if="listpicbox"
            :picscrollTop="picscrollTop"
            :rightpicList="rightpicList"
            :classifypic="classifypic"
            :rightlistheight="rightlistheight"
            :rightpiclistdel="rightpiclistdel"
            @materialDel="materialListdelchildByImg"
            @childvalue="rightpiclistchildValue(arguments, 1)"
            @picListPage="picListPage"
            @scroll="rightpicListscroll"
          />
          <rightlogolist
            v-if="logolistbox"
            :logoscrollTop="logoscrollTop"
            :rightlistheight="rightlistheight"
            :rightlogoList="rightlogoList"
            :classifylogo="classifylogo"
            @childValue="rightlogolistchildValue(arguments)"
            @LogoListPage="LogoListPage"
            @scroll="rightlogoListscroll"
          />
          <rightfloat
            v-if="floatlistbox"
            :rightlistsecond="rightlistsecond"
            @childleave="floatlistboxchildleave"
            @childlist="floatlistboxchildlist(arguments)"
          />
        </div>
      </div>
      <!-- 内容——中 -->
      <div class="con_cen" ref="center" @click.self="centershowstageClick">
        <!-- 添加模板 -->
        <templatematerial
          v-if="material"
          :name="materialname"
          @childByValue="materialclassitychildByValue"
          @childByImg="materialclassitychildByImg"
          @relogin="reloginFun"
        />

        <div id="container" v-show="container" :style="scaleFun">
          <v-stage
            container="container"
            ref="stage"
            id="stage"
            :config="configKonva"
            @mousedown="handleMousedown"
            style="stage"
          >
            <v-layer
              ref="layer"
              @dragmove="layerDragMove"
              @dragend="layerDragEnd"
            >
              <v-rect :config="configKonva" />
              <v-image
                v-for="item in listImg"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseover.self="stageMouseenter"
              />
              <v-image
                v-for="item in listlogo"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-text
                v-for="item in listNote"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-ellipse
                v-for="item in listEllipse"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-rect
                v-for="item in listRect"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @mouseout="stageMouseleave"
              />
              <!-- <v-rect
                v-for="item in keybox"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @mouseleave.self="stageMouseleave"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              /> -->
              <v-line v-for="(v, i) in assistline" :config="v" :key="i" />
              <v-transformer
                ref="transformerText"
                :config="{
                  rotateEnabled: true,
                  borderStroke: '#87ceeb',
                  anchorFill: '#e9e9e9',
                  anchorSize: 5,
                  borderStrokeWidth: 2,
                  anchorSize: 20,
                  padding: 5,
                  anchorStroke: 'transparent',
                  anchorCornerRadius: 30,
                  rotateAnchorOffset: 10,
                  rotationSnapTolerance: 0,
                  shouldOverdrawWholeArea: false,
                }"
              />
            </v-layer>
          </v-stage>
        </div>
        <!-- 舞台控制器 -->
        <!-- <proportioncontrol v-if="proportion" @loadele="loadele" /> -->
      </div>
      <!-- 内容——右 -->
      <div
        class="con_right"
        :style="
          sortmanlist
            ? 'background:#f4f4f4;box-shadow:0 0 0 transparent'
            : 'background:#fff'
        "
      >
        <pictureboxtool
          v-if="picturebox"
          :key="0"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="pictureboxtooldelchild"
        />
        <picturetool
          v-if="picture"
          :key="1"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="picturetooldelchild"
          @maskchild="picturetoolmaskchild"
          @cropele="picturetoolcropele"
          @layer="picturetoollayer"
          @update="picturetoolupdate"
          @copy="copyStageElement"
          @deductchild="eleTransformend"
          @glassylayercancel="picturetoolglassylayercancel"
          @illuminate="picturetoolilluminate"
        />
        <texttool
          v-if="text"
          :key="2"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="texttooldelchild"
          @copy="copyStageElement"
          @add="addStageElement"
          @deductchild="eleTransformend"
          @childhistory="textchildhistory(arguments)"
        />
        <datacolortool
          v-if="datacolor"
          :key="3"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="datacolortooldelchild"
          @deductchild="eleTransformend"
          @childhistory="textchildhistory(arguments)"
        />
        <logotool
          v-if="logo"
          :key="4"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="logotooldelchild"
          @copy="copyStageElement"
          @deductchild="eleTransformend"
        />
        <layerstool
          v-if="layers"
          @layer="picturetoollayer"
          @add="addStageElement"
          @addpic="rightpiclistchildValue(arguments, 0)"
          @deductchild="eleTransformend"
          :formulafa="formula"
        />
      </div>
    </div>
  </div>
</template>

<script>
//监听dom
let elementResizeDetectorMaker = require("element-resize-detector");

let FontFaceObserver = require("fontfaceobserver");
//复制图片
const { ClipboardItem } = window;
//user
import usermanage from "@/components/user/usermanage";
// import changepassword from "@/components/user/changepassword";
// import userpermissions from "@/components/user/userpermissions"
//top
import illuminateimage from "@/components/compiletop/illuminateimage";
import compileTop from "@/components/compiletop/compiletop";
import canvasfont from "@/components/compiletop/canvasfont";
import cropimage from "@/components/compiletop/cropimage";
//left
import rightlist from "@/components/compileleft/rightlist";
import rightpiclist from "@/components/compileleft/rightpiclist";
import rightlogolist from "@/components/compileleft/rightlogolist";
import rightfloat from "@/components/compileleft/rightfloat";
import righttextbottom from "@/components/compileleft/righttextbottom";
import rightpicboxbottom from "@/components/compileleft/rightpicboxbottom";
import rightdatabottom from "@/components/compileleft/rightdatabottom";
import rightmodelseach from "@/components/compileleft/rightmodelseach";
import rightpicseach from "@/components/compileleft/rightpicseach";
import rightlogoseach from "@/components/compileleft/rightlogoseach";
//center
import templatematerial from "@/components/compilecen/templatematerial";
import sortmanage from "@/components/compilecen/sortmanage";
import stagetooltip from "@/components/compilecen/stagetooltip";
import stagetooltipnewmodel from "@/components/compilecen/stagetooltipnewmodel";
import stagetooltipdel from "@/components/compilecen/stagetooltipdel";
import stagetooltipsave from "@/components/compilecen/stagetooltipsave";
import relogin from "@/components/compilecen/relogin";

import stagetoolload from "@/components/compilecen/stagetoolload";
import stagetooltextload from "@/components/compilecen/stagetooltextload";

//right&tool
import pictureboxtool from "@/components/editingtools/picturebox";
import picturetool from "@/components/editingtools/picture";
import texttool from "@/components/editingtools/text";
import datacolortool from "@/components/editingtools/datacolor";
import logotool from "@/components/editingtools/logo";
import layerstool from "@/components/editingtools/layers";
//utils
import mixin from "@/utils/mixin";
import { requestCode } from "@/utils";
import { mapState,mapMutations } from "vuex";
import {
  getTemplateDel,
  getTemplateList,
  postLogoHandle,
  getTemplateTindOne,
  postTemplateSave,
  postMaterialHandle,
  postTemplateHandle,
  postUpload,
  getLogoList,
  getMaterialDel,
  getMaterialList,
} from "@/api/template";
import { getBaseList, postInsertOnlineLog, getOnlineCount } from "@/api/user";

export default {
  mixins: [mixin],
  components: {
    usermanage,
    compileTop,
    cropimage,
    rightlist,
    rightlogolist,
    rightpiclist,
    relogin,
    // changepassword,
    // userpermissions,
    rightfloat,
    righttextbottom,
    rightpicboxbottom,
    templatematerial,
    sortmanage,
    stagetooltip,
    stagetooltipdel,
    illuminateimage,
    stagetooltipsave,
    stagetooltipnewmodel,
    // proportioncontrol,
    rightdatabottom,
    stagetoolload,
    stagetooltextload,
    //tools
    pictureboxtool,
    picturetool,
    texttool,
    datacolortool,
    logotool,
    layerstool,
    rightmodelseach,
    rightpicseach,
    rightlogoseach,
    canvasfont,
  },
  data() {
    return {
      timer:null, 
      online: null,
      process: 0,
      assistline: [],
      historyleft: false,
      historyright: false,
      parentId: null,
      illuminateimage: false,
      illuminateimageimg: "",
      usermanage: false, //用户管理组件
      rightlistList: [], //请求模板列表
      rightlogoList: [], //请求logo列表
      rightpicList: [], //请求素材列表
      rightlistdel: null, //模板要删除的id
      rightpiclistdel: null, //素材要删除的id
      container: false, //舞台是否开启
      sortmanageoff: false, //分类管理的关闭按钮
      stagetooltip: false, //舞台是否保存提示框
      stagetooltipdel: false, //舞台删除模板框
      stagetooltipcon: null, //舞台删除模板框类型
      stagetooltipnewmodel: false, //舞台是否创建新模板
      stagetooltipsave: false, //舞台保存，当前只有背景
      maskframe: false, //舞台蒙版
      corpmask: false, //裁剪舞台背景
      cropimage: false, //裁切图片组件
      loadingframe: false, //处理中
      textloadingframe: false, //文字加载
      templateListId: null, //暂存舞台详情id，根据返回看是否使用新模板
      templatedelId: null, //暂存模板删除id，根据返回看是否要删除此模板
      materialId: null, //暂存素材删除id，根据返回看是否要删除此模板
      modelseachtext: "", //暂存模板搜索文本
      modelListSearch: null, //模板是否开启搜索
      modelpictext: "", //暂存素材搜索文本
      picListSearch: null, //素材是否开启搜索
      modellogotext: "", //暂存logo搜索文本
      logoListSearch: null, //logo是否开启搜索
      moedelseach: true, //不在搜索状态
      picseach: true, //不在搜索状态
      logoseach: true, //不在搜索状态
      logoscrollTop: null, //返回logoscrollTop=0
      picscrollTop: null, //picscrollTop=0
      scrollTop: null, //返回scrollTop=0
      cropimageimg: "", //当前要裁剪的图片地址
      relogin: false,
      rightlistpage: 1,
      rightlistpageCount: null,
      rightlogolistpage: 1,
      rightlogolistpageCount: null,
      rightpiclistpage: 1,
      rightpiclistpageCount: null,
      sortman: false, //控制分类管理
      sortmanlist: false, //分类管理出现两边是否要隐藏
      rightlistheight: true,
      floatlistbox: false,
      listpicbox: false,
      addtextbut: false,
      addpicboxbut: false,
      adddatabut: false,
      //tools
      picturebox: false,
      picture: false,
      text: false,
      datacolor: false,
      logo: false,
      tempicture: false,
      layers: false,
      headline: "新建模板",
      formula: "", //所选择模板的公式
      afterbackimg: [], //置于背景之后的图片名称
      //内容——左
      //列1
      img1: require("@/assets/img/trans.png"),
      materialTit: [
        {
          img: require("@/assets/img/moban.png"),
          opt: require("@/assets/img/moban1.png"),
          tit: "模板库",
          select: true,
        },
        {
          img: require("@/assets/img/cucai.png"),
          opt: require("@/assets/img/cucai1.png"),
          tit: "素材库",
          select: false,
        },
        {
          img: require("@/assets/img/logo.png"),
          opt: require("@/assets/img/logo1.png"),
          tit: "LOGO库",
          select: false,
        },
        {
          img: require("@/assets/img/text.png"),
          opt: require("@/assets/img/text1.png"),
          tit: "文字",
          select: false,
        },
        {
          img: require("@/assets/img/图片框.png"),
          opt: require("@/assets/img/图片框点击.png"),
          tit: "图片框",
          select: false,
        },
        {
          img: require("@/assets/img/日期.png"),
          opt: require("@/assets/img/日期选中.png"),
          tit: "日期框",
          select: false,
        },
        {
          img: require("@/assets/img/分类管理未点击.png"),
          opt: require("@/assets/img/分类管理点击.png"),
          tit: "分类管理",
          select: false,
        },
      ],
      // 列2——元素是否出现——text、seach、list
      rightmodelseachbox: true,
      rightpicseachbox: false,
      rightlogoseachbox: false,
      listbox: true,
      logolistbox: false,
      // 列2-元素addbot是否出现——bottom
      addtextbutton: true,
      addbot: "新模板",
      // 内容——左——列2——分类
      //列表标题
      con: "模板分类",
      //名称列表
      materialListTit: [
        {
          tit: "常用",
          select: false,
          border: false,
        },
        {
          tit: "收藏",
          border: false,
          select: false,
        },
        {
          tit: "选择分类",
          border: false,
          select: false,
        },
      ],
      materialname: "素材",
      material: false,
      image: null, //背景图片数据
      BackPicUrl: null, //背景图片
      powertype: null, //用户类型
      tr: "",
      //中间屏幕大小
      // maxW: null,
      // maxH: null,
      TemplateListCache: "", //暂存模板

      save: {
        name: "新模板", //模板名称
        coversrc: "", //模板图片地址
        listImg: null, //图片数组对象
        listNote: null, //文本数组对象
        listEllipse: null, //图片框的数组对象
        listlogo: null, //logo的数组对象
      },
      backSizebfb: "",
      // modelTotalNumberPages: 0, //模板总页数
      // imgTotalNumberPages: 0, //素材总页数
      // logoTotalNumberPages: 0, //logo总页数
      // logoCurrentPage: 0, //当前页
      // modelCurrentPage: 0,
      sortmanagelist: [
        {
          tit: "一级分类",
          list: [],
          buttontext: "一级分类管理",
        },
        {
          tit: "二级分类",
          list: [],
          buttontext: "二级分类管理",
        },
        {
          tit: "标签管理",
          list: [],
          buttontext: "标签管理",
        },
      ],
      classifytem: 0,
      classifylogo: 0,
      classifypic: 0,
      userId: window.localStorage.getItem("eplatformid"),
      token: window.localStorage.getItem("eplatformtoken"),
      parid: "",
      sonid: "",
      GUIDELINE_OFFSET: 0,
    };
  },
  computed: {
    ...mapState("templateStage", [
      //舞台是否开启
      "proscenium",
      //舞台大小
      "configKonva",
      //元素
      "listImg",
      "listlogo",
      "listNote",
      "listEllipse",
      "listRect",
      "keybox",
      //当前被选中的元素
      "modifyele",
      //图片大小
      "imgW",
      "imgH",
      //centerDom
      "maxW",
      "maxH",
      //舞台的元素个数
      "numberRefs",
      //选中元素name
      "selectedShapeName",
      //缩小比例
      "backSize",
      // "editbackSize",
      "konvaname",
      "konvaid",
      "onelevel",
      "twolevel",
      "threelevel",
      "imgnum", //图片数量
      "textfontsize", //文字
      "textfontFamily",
      "sizeListC",
      "clickname",
      "textNode",
      "backImg",
      "cancelName",
      "keyele",
      "historylist", //历史列表
      "historycurrentpage", //历史当前进程
      "rules", //输入的逻辑关系
      "originx",
      "originy",
      "endx",
      "endy",
      "onelevel",
      "twolevel",
      "threelevel",
    ]),
    ...mapState("testData", [
      "testListImg",
      "testlistNote",
      "testlistEllipse",
      "testlistlogo",
    ]),
    scaleFun: function () {
      let { imgW, imgH, backSize, maxW, maxH } = this;
      return `width:${imgW}px;height:${imgH}px;transform: translate(${
        (maxW - imgW) / 2
      }px,${(maxH - imgH) / 2}px) scale(${backSize});`;
    },
    changeData() {
      const { listImg, listlogo, listNote } = this;
      return {
        listImg,
        listlogo,
        listNote,
      };
    },
  },
  watch: {
    changeData: function (newV) {
      this.GUIDELINE_OFFSET =
        newV.listImg.length + newV.listlogo.length + newV.listNote.length;
    },
    classifytem(val) {
      if (val != 3) {
        this.parid = "";
        this.sonid = "";
      }
    },
    classifypic(val) {
      if (val != 3) {
        this.parid = "";
        this.sonid = "";
      }
    },
    maxW() {
      this.$datatools.debounce(
        this.$createstage.CalculateScreensize(this, this.maxW, this.maxH),
        1000
      );
    },
    cancelName() {
      this.$createstage.delTransformer(this);
    },
    "$store.state.templateStage.updatele"() {
      //对数据进行操作
      this.loadele(this.modifyele);
    },
  },
  methods: {
    ...mapMutations("templateStage",["setRules"]),
    //按回退键返回图层按钮
    layerstool() {
      this.$createstage.creacteTools(this, "back");
    },
    //文本工具历史记录
    textchildhistory(property, value, name) {
      this.$createstage.saveTextHistory(this, property, value, name);
    },
    //历史记录
    deductchild() {
      this.$createstage.saveHistory(this);
    },
    //点击中间部分展示舞台
    centershowstageClick() {
      if (this.proscenium) this.$createstage.creacteTools(this, "back");
    },
    //历史进程
    historyprocess(value) {
      this.$createstage.delTransformer(this);
      this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
      this.$store.commit("templateStage/HISTORYPROCESS", value);
      this.$createstage.showHistory(this);
    },

    //内容——左列2——分类——全部分类
    materialAll() {
      this.materialListTit.forEach((v) => {
        this.floatlistbox = false;
        v.select = false;
        v.border = false;
      });
      let tit;
      this.materialTit.forEach((v) => {
        if (v.select == true) tit = v.tit;
      });
      if (tit == "模板库") {
        this.classifytem = 0;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.classifypic = 0;
        this.RequestMaterialData();
      } else if (tit == "LOGO库") {
        this.classifylogo = 0;
        this.RequestLogoData();
      }
    },
    // 内容——左——列2——分类名称——点击选中
    materialListTitClick(i) {
      let tit;
      this.materialTit.forEach((v) => {
        if (v.select == true) tit = v.tit;
      });
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      this.materialListTit[i].select = true;
      this.materialListTit[i].border = true;
      if (tit == "模板库") {
        this.classifytem = i + 1;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.classifypic = i + 1;
        this.RequestMaterialData();
      } else if (tit == "LOGO库") {
        this.classifylogo = i + 1;
        this.RequestLogoData();
      }
      if (this.materialListTit[2].tit == "全部") return;
      else if (i == 2) this.floatlistbox = !this.floatlistbox;
      else this.floatlistbox = false;
    },
    //内容——左——列1——点击选中
    materialTitClick(i) {
      this.numberOnline();
      this.addtextbutton = true;
      this.adddatabut = false;
      this.addtextbut = false;
      this.addpicboxbut = false;
      this.sortman = false;
      this.sortmanlist = false;
      this.floatlistbox = false;
      this.maskframe = false;
      this.listbox = false;
      this.listpicbox = false;
      this.logolistbox = false;
      this.logolistbox = false;
      this.material = false;
      this.rightmodelseachbox = false;
      this.rightpicseachbox = false;
      this.rightlogoseachbox = false;
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      let { tit } = this.materialTit[i];
      this.materialTit.forEach((v) => {
        v.select = false;
      });
      this.materialTit[i].select = true;
      if (tit == "模板库") {
        this.addbot = "新模板";
        this.con = "模板分类";
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") {
            v.tit = "选择分类";
          }
        });
        this.classifytem = 0;
        this.RequestInitialData();
        this.rightmodelseachbox = true;
        this.listbox = true;
        // 请求一次数据渲染列表
      } else if (tit == "素材库") {
        this.con = "素材分类";
        this.addbot = "新素材";
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") v.tit = "选择分类";
        });
        this.classifypic = 0;
        this.RequestMaterialData();
        this.rightpicseachbox = true;
        this.listpicbox = true;
        // if (this.powertype == 0) this.addtextbutton = false;
      } else if (tit == "LOGO库") {
        this.con = "LOGO";
        this.addbot = "新LOGO";
        this.materialListTit.forEach((v) => {
          if (v.tit == "选择分类") v.tit = "全部";
        });
        this.classifylogo = 0;
        this.RequestLogoData();
        this.rightlogoseachbox = true;
        this.logolistbox = true;
        if (this.powertype == 0) this.addtextbutton = false;
      } else if (tit == "文字") {
        this.addbot = "文字";
        this.addtextbutton = false;
        this.addtextbut = true;
      } else if (tit == "图片框") {
        this.addbot = "自定义图片框";
        this.addtextbutton = false;
        this.addpicboxbut = true;
      } else if (tit == "日期框") {
        this.addbot = "日期框";
        this.adddatabut = true;
        this.addtextbutton = false;
      } else if (tit == "分类管理") {
        if (!this.proscenium) {
          this.addtextbutton = false;
          this.picturebox = false;
          this.picture = false;
          this.text = false;
          this.datacolor = false;
          this.logo = false;
          this.tempicture = false;
          this.sortman = true;
          this.sortmanlist = true;
        } else {
          this.$store.commit("popupmanage/MASKFRAME", true);
          this.stagetooltip = false;
          this.sortman = true;
          this.addtextbutton = false;
          this.maskframe = true;
          this.sortmanageoff = true;
        }
      }
    },
    //点击添加模板
    addmaterialClick() {
      if (this.addbot == "新素材") {
        this.material = !this.material;
        this.materialname = "素材";
        if (this.material && this.proscenium) this.maskframe = true;
      } else if (this.addbot == "新模板") this.ifCreateNewTemplate();
      else if (this.addbot == "新LOGO") {
        this.material = !this.material;
        this.materialname = "logo";
        if (this.material && this.proscenium) this.maskframe = true;
      } else this.material = false;
    },
    // 是否创建新模板
    ifCreateNewTemplate() {
      if (this.proscenium) {
        //如果舞台已经开启，先询问
        this.stagetooltipnewmodel = true;
        this.maskframe = true;
        // this.templateListId = childValue;
      } else {
        this.material = !this.material;
        this.materialname = "模板";
      }
    },

    //询问是否要创建新模板
    stagetooltipnewmodelchildClick(childValue) {
      this.stagetooltipnewmodel = false;
      this.maskframe = false;
      if (childValue === 1) {
        this.material = !this.material;
        this.materialname = "模板";
        this.maskframe = true;
      }
    },

    stagetooltipsavechildClick(childValue) {
      this.stagetooltipsave = false;
      this.maskframe = false;
      if (childValue == 1)
        //确定
        this.uploadTemplate();
    },
    //询问是否要替换当前模板 ------------------------ stagetooltip
    stagetooltipchildClick(childValue) {
      this.stagetooltip = false;
      this.maskframe = false;
      if (childValue === 1) {
        this.TemplateDetails(this.templateListId);
        this.loadingframe = true;
        this.maskframe = true;
      }
    },
    //询问是否要删除当前模板 ------------------------ stagetooltipdel
    stagetooltipdelchildClick(childValue) {
      if (childValue[0] === 1) {
        if (childValue[1] == "模板") this.TemplateDel(this.templatedelId);
        else this.MaterialDel(this.materialId);
      }
      this.stagetooltipdel = false;
      this.stagetooltipcon = "";
      this.maskframe = false;
    },
    //左侧搜索框 ------------------------------------ rightseach
    //搜索模板库
    async modelListSearchVal(key, pageNum = 1) {
      this.numberOnline();
      this.modelListSearch = true;
      let { userId, token, classifytem } = this;
      let all = 0;
      if (classifytem == 0 || classifytem == 3) {
        classifytem = 0;
        if (this.powertype == 1) all = 1;
      }
      let info = await getTemplateList({
        key,
        listType: classifytem,
        dataType: 1,
        firstType: "",
        secondType: "",
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all,
      });
      if (pageNum == 1) {
        this.rightlistpage = 1;
        this.rightlistList = [];
        this.scrollTop = 0;
      }
      if (info.data.data) {
        this.rightlistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightlistList.push(v);
        });
      }
    },
    //获取搜索内容
    modelSearchText(childValue) {
      this.modelseachtext = childValue;
    },
    //展示全部的模板库内容
    modelSearchALLVal() {
      this.RequestInitialData();
      this.modelListSearch = true;
    },
    picSearchALLVal() {
      this.RequestMaterialData();
      this.picListSearch = true;
    },
    //搜索素材库
    async picsearchval(key, pageNum = 1) {
      this.numberOnline();
      this.picListSearch = true;
      let { userId, token, classifypic } = this;
      if (classifypic == 0 || classifypic == 3) classifypic = 0;
      let info = await getMaterialList({
        key, //搜索关键字
        listType: classifypic, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 1, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id  listType为1或2是必填
        token, //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      if (pageNum == 1) {
        this.rightpiclistpage = 1;
        this.rightpicList = [];
        this.picscrollTop = 0;
      }
      if (info.data.data) {
        this.rightpiclistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightpicList.push(v);
        });
      }
    },
    //获取素材搜索内容
    picSearchText(childValue) {
      this.modelpictext = childValue;
    },
    //搜索logo库
    async logosearchval(key, pageNum = 1) {
      this.numberOnline();
      let { userId, token, classifylogo } = this;
      if (classifylogo == 0 || classifylogo == 3) {
        userId = "";
        token = "";
        classifylogo = 0;
      }
      this.logoListSearch = true;
      let info = await getLogoList({
        key, //搜索关键字
        listType: 0, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: classifylogo, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id
        token, //用户token
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      if (pageNum == 1) {
        this.rightlogolistpage = 1;
        this.rightlogoList = [];
        this.logoscrollTop = 0;
      }
      if (info.data.data) {
        this.rightlogolistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    rightlogoListscroll(childValue) {
      this.logoscrollTop = childValue;
    },
    rightpicListscroll(childValue) {
      this.picscrollTop = childValue;
    },
    rightListscroll(childValue) {
      this.scrollTop = childValue;
    },
    //获取logo搜索内容
    logoSearchText(childValue) {
      this.modellogotext = childValue;
    },

    //展示全部的模板库内容
    logoSearchALLVal() {
      this.RequestLogoData();
      this.logoListSearch = true;
    },
    //模板列表 -------------------------------------- rightlist
    // TemplateListSavechildByImg(childValue) {
    //   this.stagetooltip = childValue;
    //   this.$store.commit("popupmanage/MASKFRAME", childValue);
    // },

    //模板列表 --- 删除模板
    TemplateListdelchildByImg(childValue) {
      this.templatedelId = childValue;
      this.stagetooltipdel = true;
      this.stagetooltipcon = "模板";
      this.maskframe = true;
    },
    materialListdelchildByImg(childValue) {
      this.materialId = childValue;
      this.stagetooltipdel = true;
      this.stagetooltipcon = "素材";
      this.maskframe = true;
    },
    //模板列表 --- 点击模板详情
    TemplateListconchildByImg(childValue) {
      if (this.proscenium) {
        //如果舞台已经开启，先询问
        this.stagetooltip = true;
        this.templateListId = childValue;
        this.$store.commit("templateStage/CLEARREATLIST", []);
      } else {
        //直接请求
        this.$datatools.debounce(this.TemplateDetails(childValue), 2000);
        this.loadingframe = true;
      }
      this.maskframe = true;
    },
    //模板列表 --- 滚动条滚动加载
    // TemplateListnewpagechildByImg(childValue) {
    //   this.RequestInitialDataMore(childValue);
    // },
    TemplateListPage() {
      if (this.rightlistpageCount > this.rightlistpage) {
        this.rightlistpage = this.rightlistpage + 1;
        if (this.modelseachtext)
          this.modelListSearchVal(this.modelseachtext, this.rightlistpage);
        else
          this.RequestInitialData(this.rightlistpage, this.parid, this.sonid);
      }
    },
    LogoListPage() {
      if (this.rightlogolistpageCount > this.rightlogolistpage) {
        this.rightlogolistpage = this.rightlogolistpage + 1;
        if (this.modellogotext)
          this.logosearchval(this.modellogotext, this.rightlogolistpage);
        else this.RequestLogoData(this.rightlogolistpage);
      }
    },
    picListPage() {
      if (this.rightpiclistpageCount > this.rightpiclistpage) {
        this.rightpiclistpage = this.rightpiclistpage + 1;
        if (this.modelpictext)
          this.picsearchval(this.modelpictext, this.rightpiclistpage);
        else
          this.RequestMaterialData(
            this.rightpiclistpage,
            this.parid,
            this.sonid
          );
      }
    },
    //模板列表 --- 详情请求事件
    async TemplateDetails(id) {
      this.numberOnline();
      this.$store.commit("templateStage/clearRules");
      let info = await getTemplateTindOne({ templateId: id });
      if (info != undefined) {
        this.formula = info.data.data.rule;
        this.setRules(info.data.data.rule);
        this.$createstage.templateAnalysisOfData(this, info.data.data);
        await postTemplateHandle({
          listType: 1, //常用或者收藏    1常用  2收藏   必填
          userId: window.localStorage.getItem("eplatformid"), //用户id
          templateId: id, //模板id
          token: window.localStorage.getItem("eplatformtoken"), //用户token
          operationType: 0, //0添加,1取消
        });
      }
    },
    //模板事件 --- 删除请求事件
    async TemplateDel(id) {
      this.numberOnline();
      let info = await getTemplateDel({ templateId: id });
      if (info.data.code == 0) this.rightlistdel = this.templatedelId;
      requestCode(info, "删除成功", "删除失败");
    },
    //素材事件 --- 删除请求事件
    async MaterialDel(id) {
      let info = await getMaterialDel({ materialId: id });
      if (info.data.code == 0) this.rightpiclistdel = this.materialId;
      requestCode(info, "删除成功", "删除失败");
    },
    //子传父
    materialclassitychildByImg(childValue) {
      //先清状态管理
      this.$createstage.ClearingVuex(this);
      this.$store.commit("templateStage/IMGW", childValue.imgW);
      this.$store.commit("templateStage/IMGH", childValue.imgH);
      this.BackPicUrl = childValue.uploadImg;
      this.$createstage.creacteKonva(this);
    },
    materialclassitychildByValue(childValue) {
      this.maskframe = false;
      this.material = childValue;
    },
    sortmanagechildByValue(childValue) {
      this.$store.commit("popupmanage/MASKFRAME", childValue);
    },
    sortmanageguanbiByValue(childValue) {
      this.maskframe = false;
      this.sortman = childValue;
      this.$store.commit("popupmanage/MASKFRAME", childValue);
    },
    async rightpiclistchildValue(childValue, type) {
      this.numberOnline();
      this.$createstage.creactepicture(this, childValue[0], "pic");
      if (type == 1) {
        await postMaterialHandle({
          listType: 1, //常用或者收藏    1常用  2收藏   必填
          userId: window.localStorage.getItem("eplatformid"), //用户id
          materialId: childValue[1], //素材id
          token: window.localStorage.getItem("eplatformtoken"), //用户token
          operationType: 0, //0添加,1取消
        });
      }
    },
    async rightlogolistchildValue(childValue) {
      this.numberOnline();
      this.$createstage.creactepicture(this, childValue[0], "logo");
      await postLogoHandle({
        listType: 1, //常用或者收藏    1常用  2收藏   必填
        userId: window.localStorage.getItem("eplatformid"), //用户id
        logoId: childValue[1], //模板id
        token: window.localStorage.getItem("eplatformtoken"), //用户token
        operationType: 0, //0添加,1取消
      });
    },
    righttextbottomchildValue(childValue) {
      this.$createstage.creactetext(this, childValue);
    },
    rightpicboxbottomchildValue(childValue) {
      this.$createstage.creacteellipse(this, childValue);
    },
    rightdatabottomchildValue(childValue) {
      this.$createstage.creactetext(this, childValue);
    },
    TemplateListsavechildSave(childValue) {
      this.stagetooltip = childValue;
    },
    //图片工具-元素锁住
    picturetoolnonechild() {
      this.$createstage.delTransformer(this);
    },
    //找到back所在的层级
    backIndex() {},

    //舞台提示框
    //stagetooltipchildValue() {
    // if (childValue=='ok') { //不保存，直接选中
    // }else if (childValue=='no') {
    // }
    //},
    //内容——左——列2——浮动盒子
    floatlistboxchildleave(value) {
      this.floatlistbox = value;
    },
    floatlistboxchildlist(val) {
      this.parid = val[0];
      this.sonid = val[1];
      //判断是模板列表还是素材列表
      if (this.addbot == "新模板") this.RequestInitialData(1, val[0], val[1]);
      else if (this.addbot == "新素材")
        this.RequestMaterialData(1, val[0], val[1]);
    },
    // 点击空白
    concenMousedown(e) {
      this.$createstage.stageblank(this, e);
    },
    //文本双击出现文本框
    editTextDblclick(e) {
      this.$createstage.editTextDblclick(this, e);
    },
    //点击保存按钮
    compileTopsaveValue() {
      if (this.proscenium) {
        //判断舞台中是否只有背景图
        if (
          this.listImg.length == 1 &&
          this.listNote.length == 0 &&
          this.listEllipse.length == 0 &&
          this.listlogo.length == 0
        ) {
          //开启提示框
          this.stagetooltipsave = true;
          this.maskframe = true;
          //直接保存
        } else this.uploadTemplate();
      }
    },

    // //上传模板
    async uploadTemplate() {
      this.$store.commit("templateStage/CLEARREATLIST", []);
      this.loadingframe = true;
      this.maskframe = true;
      let stage = this.$refs.stage.getNode();
      this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
      this.$createstage.delTransformer(this);
      // //图片下载到本地 base64
      let dataURL = stage.toDataURL({ pixelRatio: 0.3 });
      let templateTag = this.$datatools.TextToPinyin(this.konvaname);
      let textObj = [];
      let materialObj = [];
      let imgBoxObj = [];
      let logoObj = [];
      //素材
      for (const v of this.listImg) {
        let obj = {};
        //滤镜
        obj.filters = [];
        v.config.filters.forEach((v) => {
          obj.filters.push(v.name);
        });
        obj.brightness = v.config.brightness;
        obj.draggable = v.config.draggable;
        obj.h = v.config.h;
        obj.height = v.config.height;
        obj.name = v.config.name;
        obj.opacity = v.config.opacity;
        obj.picname = v.config.picname;
        obj.s = v.config.s;
        obj.strokeEnabled = v.config.strokeEnabled;
        obj.w = v.config.w;
        obj.width = v.config.width;
        obj.x = v.config.x;
        obj.y = v.config.y;
        obj.z = v.config.z;
        obj.scaleX = v.config.scaleX;
        obj.scaleY = v.config.scaleY;
        //图片
        if (v.config.image.src.indexOf("data:image") > -1) {
          //是base
          let array = this.$datatools.baseToType(v.config.image.src);
          let fd = new FormData();
          let blob = new Blob([new Uint8Array(array)], {
            type: "image/png",
          });
          fd.append("file", blob, `上传图片.png`);

          let info = await postUpload(fd);
          if (!info.data.code == 0) {
            requestCode(info, "保存成功", "网络超时");
            return;
          }
          obj.image = info.data.url;
        } else obj.image = v.config.image.src;
        materialObj.push(obj);
      }

      //logo
      for (const v of this.listlogo) {
        let obj = this.$datatools.deepcopy(v.config);
        //滤镜
        obj.filters = [];
        v.config.filters.forEach((v) => {
          obj.filters.push(v.name);
        });
        //图片
        if (v.config.image.src.indexOf("data:image") > -1) {
          //是base
          let array = this.$datatools.baseToType(v.config.image.src);
          let fd = new FormData();
          let blob = new Blob([new Uint8Array(array)], {
            type: "image/png",
          });
          fd.append("file", blob, `上传图片.png`);
          let info = await postUpload(fd);
          obj.image = info.data.url;
        } else obj.image = v.config.image.src;
        logoObj.push(obj);
      }
      //文本
      this.listNote.forEach((v) => {
        let obj = this.$datatools.deepcopy(v.config);
        textObj.push(obj);
      });
      // 图片框
      this.listEllipse.forEach((v) => {
        let obj = this.$datatools.deepcopy(v.config);
        imgBoxObj.push(obj);
      });
      //这里对base64串进行操作，去掉url头，并转换为byte
      let array = this.$datatools.baseToType(dataURL);
      textObj = JSON.stringify(textObj);
      materialObj = JSON.stringify(materialObj);
      imgBoxObj = JSON.stringify(imgBoxObj);
      logoObj = JSON.stringify(logoObj);
      let userId = window.localStorage.getItem("eplatformid");
      let token = window.localStorage.getItem("eplatformtoken");
      if (userId && token) {
        let fd = new FormData();
        let blob = new Blob([new Uint8Array(array)], { type: "image/png" });
        fd.append("file", blob, `${this.konvaname}.png`);
        fd.append("templateName", this.konvaname);
        fd.append("templateTag", templateTag);
        fd.append("textObj", textObj);
        fd.append("materialObj", materialObj);
        fd.append("imgBoxObj", imgBoxObj);
        fd.append("logoObj", logoObj);
        fd.append("firstType", this.onelevel);
        fd.append("secondType", this.twolevel);
        fd.append("tagIds", this.threelevel);
        fd.append("dataType", 1);
        fd.append("userId", userId);
        fd.append("token", token);
        var rulestr = JSON.stringify(this.rules) 
        //调用保存文本时上传公式
        var textArr = JSON.parse(textObj);
        // console.log(JSON.parse(this.rules));
        if(textArr.length==1&&(this.rules.length==0||(this.rules.length==1&&!this.rules[0]))){
          fd.append("rule", '["=all"]');
        }else if (this.rules) {
          fd.append("rule", rulestr)
        }else{
          fd.append("rule", "");
        }
        //展示舞台上传
        if (this.konvaid) fd.append("templateId", this.konvaid);
        let info = await postTemplateSave(fd);
        if (info) {
          this.loadingframe = false;
          this.maskframe = false;
          requestCode(info, "保存成功", "网络超时");
          this.RequestInitialData();
        }
      } else {
        this.relogin = true;
        this.maskframe = true;
      }
      this.numberOnline();
    },
    //工具类
    //文字是否加载
    fontFaceObserver() {
      let font = new FontFaceObserver("GreatWall-RegularScript");
      font
        .load()
        .then(function () {
          // console.log("字体已加载。");
        })
        .catch(function () {
          // console.log("字体存在错误");
        });
    },

    //取消canvas右键默认事件
    cancelCanvasRightclickDefaultevent() {
      window.document.oncontextmenu = function () {
        return false;
      };
    },
    //监听dom
    listeningDom() {
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.center, (ele) => {
        this.$store.commit("templateStage/MAXW", ele.offsetWidth - 10);
        this.$store.commit("templateStage/MAXH", ele.offsetHeight - 10);
      });
    },
    //保存复制图片工具
    canvasCopy() {
      let canvas = document.getElementsByTagName("canvas")[0];
      canvas.toBlob((blob) => {
        const clipboardItem = new ClipboardItem({ "image/png": blob });
        navigator.clipboard.write([clipboardItem]);
      }, "image/png");
      this.$message("复制成功");
    },

    //请求-------------------------------------------------
    //需要
    // 请求模板
    async RequestInitialData(pageNum = 1, firstType = "", secondType = "") {
      this.numberOnline();
      let { userId, token, classifytem } = this;
      if (pageNum == 1) {
        this.rightlistList = [];
        this.rightlistpage = 1;
        this.scrollTop = 0;
      }
      let all = 1;
      if (classifytem == 0 || classifytem == 3) {
        classifytem = 0;
        if (this.powertype == 0) all = 0;
      }
      let info = await getTemplateList({
        key: "",
        listType: classifytem,
        dataType: 1,
        firstType,
        secondType,
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all,
      });
      this.rightlistpageCount = Math.ceil(info.data.pageCount / 40);
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlistList.push(v);
        });
      }
    },
    // 请求素材
    async RequestMaterialData(pageNum = 1, firstType = "", secondType = "") {
      this.numberOnline();
      if (pageNum == 1) {
        this.rightpicList = [];
        this.rightpiclistpage = 1;
        this.picscrollTop = 0;
      }
      let { userId, token, classifypic } = this;
      if (this.classifypic == 0 || classifypic == 3) classifypic = 0;
      let info = await getMaterialList({
        key: "",
        listType: classifypic,
        dataType: 1,
        firstType,
        secondType,
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      this.rightpiclistpageCount = Math.ceil(info.data.pageCount / 40);
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightpicList.push(v);
        });
      }
    },
    // 请求logo
    async RequestLogoData(pageNum = 1) {
      this.numberOnline();
      if (pageNum == 1) {
        this.rightlogoList = [];
        this.rightlogolistpage = 1;
        this.logoscrollTop = 0;
      }
      let { userId, token, classifylogo } = this;
      if (classifylogo == 0 || classifylogo == 3) classifylogo = 0;

      let info = await getLogoList({
        key: "", //搜索关键字
        listType: classifylogo, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 0, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id  listType为1或2是必填
        token, //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      this.rightlogolistpageCount = Math.ceil(info.data.pageCount / 40);
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    //工具tool-----------------------------------------
    //工具-元素锁住
    nonechild() {
      this.$createstage.delTransformer(this);
    },
    //工具-更新元素
    loadele(childValue) {
      this.$nextTick(() => {
        const node = this.$refs[childValue][0].getStage();
        node.cache();
        node.getLayer().batchDraw();
      });
    },
    //工具-取消上锁模式，重新添加变换器
    addtrans() {
      this.$createstage.delTransformer(this);
      this.$store.commit("templateStage/SELECTEDSHAPENAME", this.modifyele);
      this.$store.commit("templateStage/CLICKNAMEREACT", this.modifyele);
      this.$createstage.updateTransformer(this);
    },
    //picbox工具-元素锁住
    pictureboxtooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picturebox = childValue;
    },
    //图片工具-删除元素
    picturetooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picture = childValue;
    },
    //图片工具-是否开启蒙版
    picturetoolmaskchild(childValue) {
      this.loadingframe = childValue;
      this.maskframe = childValue;
    },
    //图片工具-裁剪图片
    picturetoolcropele(childValue) {
      this.cropimageimg = "";
      let src;
      this.listImg.forEach((v) => {
        if (v.config.name == childValue) src = v.config.image.src;
      });
      if (src) {
        this.cropimageimg = src;
        this.corpmask = true;
        this.cropimage = true;
      }
    },
    picturetoolilluminate(childValue) {
      this.illuminateimageimg = "";
      let src;
      this.listImg.forEach((v) => {
        if (v.config.name == childValue) src = v.config.image.src;
      });
      if (src) {
        this.illuminateimage = true;
        this.illuminateimageimg = src;
      }
    },
    //图片工具-图层
    picturetoollayer(childValue) {
      this.$nextTick(() => {
        this.$store.commit("templateStage/SELECTEDSHAPENAME", childValue);
        this.$store.commit("templateStage/MODIFYELE", childValue);
        this.$store.commit("templateStage/CLICKNAMEREACT", childValue);
        this.$createstage.updateTransformer(this);
        this.$createstage.creacteTools(this, childValue);
      });
    },
    //图片工具-更新变换器
    picturetoolupdate(childValue) {
      //选中的进入数值
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      this.afterbackimg = [];
      this.listImg.forEach((v, i) => {
        if (i < index) this.afterbackimg.push(v.config.name);
      });
      //选中重新更新
      //添加变换器 - 判断是否低于背景层级 - if(低于背景图层)
      if (this.afterbackimg.indexOf(childValue) != -1)
        this.tr.shouldOverdrawWholeArea(true);
      else this.tr.shouldOverdrawWholeArea(false);
    },
    //图片工具-上锁是取消可以拖拽
    picturetoolglassylayercancel(childValue) {
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      let index1 = this.listImg.forEach((v, i) => {
        if (v.config.name == childValue) return i;
      });
      if (index > index1) {
        this.tr.shouldOverdrawWholeArea(true);
      } else this.tr.shouldOverdrawWholeArea(false);
    },
    //text工具-删除元素
    texttooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.text = childValue;
    },
    //data工具-删除元素
    datacolortooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.datacolor = childValue;
    },
    //logo工具-删除元素
    logotooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.logo = childValue;
    },
    //舞台事件------------------------------------------
    //鼠标按下
    handleMousedown(e) {
      this.$createstage.stageMousedown(this, e);
    },
    // //进入舞台元素
    stageMouseenter(e) {
      let name = this.$datatools.fragmentreat(e.target.name());
      if (name != this.selectedShapeName)
        this.$createstage.stageMouseenter(this, e);
    },
    stageMouseleave() {
      this.$store.commit("templateStage/CLEARREATLIST", []);
    },
    //拖拽&&旋转历史记录
    eleTransformend() {
      this.$createstage.saveHistory(this);
    },
    eleDragend(e) {
      this.$createstage.saveHistory(this);
      let originx = e.target.x();
      let originy = e.target.y();
      let endx = e.target.width() * e.target.scaleX();
      let endy = e.target.height() * e.target.scaleY();
      this.$store.commit("templateStage/LOCATION", {
        originx,
        endx,
        originy,
        endy,
      });
    },
    eleTransformstart() {
      if (this.historylist.length == 0) this.$createstage.saveHistory(this);
    },
    //元素拖拽中或变换中
    eleDragmoveTransform(e) {
      this.$store.commit("templateStage/ELEDRAGMOVETRANSFORM", e.target);
    },
    //复制元素事件
    copyStageElement() {
      this.$datatools.debounce(this.$createstage.copymodifyele(this), 2000); //设置防抖
    },
    //添加文本
    addStageElement() {
      this.$datatools.debounce(
        this.$createstage.creactetext(this, "text"),
        2000
      ); //设置防抖
    },
    picturetoolilluminateimage(childValue) {
      this.illuminateimage = false;
      if (childValue) {
        if (this.historylist.length == 0) this.$createstage.saveHistory(this);
        this.$store.commit("templateStage/CUTIMG", childValue);
        setTimeout(() => {
          this.$createstage.saveHistory(this);
          this.loadele(this.modifyele);
        }, 200);
      }
    },
    //裁剪图片
    picturetoolcropimage(childValue) {
      this.corpmask = false;
      this.cropimage = false;
      if (childValue) {
        if (this.historylist.length == 0) this.$createstage.saveHistory(this);
        this.$store.commit("templateStage/CUTIMG", childValue);
        setTimeout(() => {
          this.$createstage.saveHistory(this);
          this.loadele(this.modifyele);
        }, 200);
      }
    },
    //键盘事件-----------------------------------------
    KeyboardEvent() {
      let that = this;
      document.onkeyup = function () {
        let key = window.event.keyCode;
        if (that.proscenium) {
          window.event.preventDefault(); //关闭浏览器快捷键
          if (key == 67 && event.altKey) {
            that.$datatools.debounce(
              that.$createstage.copymodifyele(that),
              2000
            ); //设置防抖
          } else if (key == 46) {
            //如果舞台有元素直接删掉
            that.$datatools.debounce(
              that.$createstage.delmodifyele(that),
              2000
            ); //设置防抖
          } else if (key == 90 && event.ctrlKey) {
            that.process = that.process-1; //设置防抖
          } else if (key == 89 && event.ctrlKey) {
            that.process = that.process+1 //设置防抖
          }
        }
        if (key == 13) {
          if (that.rightmodelseachbox) {
            if (that.modelseachtext == "") return;
            else that.modelListSearch = false;
          } else if (that.rightpicseachbox) {
            if (that.modelpictext == "") return;
            else that.picListSearch = false;
          } else if (that.rightlogoseachbox) {
            if (that.modellogotext == "") return;
            else that.logoListSearch = false;
          }
        }
      };
    },
    sortmansubmitbox(value) {
      this.baseListVal(value);
    },
    //分类列表
    async baseListVal(value) {
      let info = await getBaseList({ parentId: 0, dataType: 1 });
      if (info.data.data) {
        this.sortmanagelist[0].list = [];
        info.data.data.forEach((v) => {
          v.select = false;
          this.sortmanagelist[0].list.push(v);
        });
      }
      value
        ? (this.parentId = value)
        : (this.parentId = info.data.data[0].dataId);
      let info1 = await getBaseList({
        parentId: this.parentId,
        dataType: 1,
      });
      if (info1.data.data) {
        this.sortmanagelist[1].list = [];
        info1.data.data.forEach((v) => {
          v.select = false;
          this.sortmanagelist[1].list.push(v);
        });
      }
      let info2 = await getBaseList({ parentId: 0, dataType: 2 });
      if (info2.data.data) {
        this.sortmanagelist[2].list = [];
        info2.data.data.forEach((v) => {
          v.select = false;
          this.sortmanagelist[2].list.push(v);
        });
      }
    },
    async numberOnline() {
      let info = await postInsertOnlineLog({
        userId: this.userId,
        token: this.token,
      });
      if (info.data.message == "鉴权失败") this.reloginClick();
    },
    async onlineCount() {
      let info = await getOnlineCount();
      this.online = info.data.num;
    },

    reloginClick() {
      this.$router.replace("/login", () => {
        window.location.reload();
      });
    },
    reloginFun() {
      this.relogin = true;
      this.maskframe = true;
    },
    layerDragMove(e) {
      this.assistline = [];
      let lineGuideStops = this.$createstage.getLineGuideStops(e.target, this);
      let itemBounds = this.$createstage.getObjectSnappingEdges(e.target, this);
      let guides = this.$createstage.getGuides(
        lineGuideStops,
        itemBounds,
        this
      );
      if (!guides.length) return;
      this.$createstage.drawGuides(guides, this);
      guides.forEach((lg) => {
        switch (lg.snap) {
          case "start": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
          case "center": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
          case "end": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
        }
      });
      this.layer.draw();
    },
    layerDragEnd() {
      this.assistline = [];
      this.layer.batchDraw();
    },
    loadinterrupt() {
      this.maskframe = false;
      this.loadingframe = false;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let powertype = window.localStorage.getItem("eplatformpowertype");
    if (powertype) {
      this.powertype = powertype;
    } else this.reloginFun();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$createstage.contentLocalCache(this);
    this.onlineCount();
    this.timer = setInterval(() => {
      this.onlineCount();
    }, 180000);
    this.numberOnline();
    this.$createstage.ClearingVuex(this);
    this.layer = this.$refs.layer.getNode();
    this.stage = this.$refs.stage.getNode();
    this.tr = this.$refs.transformerText.getNode();
    this.listeningDom();
    this.fontFaceObserver();
    this.RequestInitialData(); //初始化模板数据
    this.KeyboardEvent(); //键盘事件
    this.textloadingframe = true;
    this.maskframe = true;
    let that = this;
    document.fonts.ready.then(function () {
      // 字体加载完成后的逻辑
      that.textloadingframe = false;
      that.maskframe = false;
    });
    this.baseListVal();
    if (this.powertype == 0) {
      let num = this.materialTit.length - 1;
      this.materialTit.splice(num, 1);
    }
    this.tr.findOne(".rotater").fillPriority("pattern");
    let img = new Image();
    img.onload = function () {
      that.tr.findOne(".rotater").fillPatternImage(img);
      that.tr.findOne(".rotater").fillPatternRepeat('no-repeat');
    };
    img.src = this.img1;
    this.tr.getLayer().batchDraw();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    clearInterval(this.timer);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";

.content {
  position: relative;
  .outer();
  overflow: hidden;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(33, 33, 33, 0.24);
    z-index: 100;
  }

  .con {
    .con();
    .con_left {
      position: relative;
      height: 100%;
      .material_tit {
        width: 72px;
        height: 100%;
        float: left;
        font-size: @size;
        .roll();
        & > div {
          cursor: pointer;
          width: 100%;
          margin-top: 24px;
          .divDWJ();
          .img_div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: @color2;
            .divDAJ();
          }
          & img {
            width: 22px;
            height: 22px;
          }
          & P {
            width: 100%;
            text-align: center;
          }
        }
        & > div:nth-child(1) {
          margin-top: 0px;
          padding-top: 16px;
        }
      }
      .material_list {
        .conleftright();
        .list_classify {
          height: 42px;
          font-size: @size;
          .divAJS();
          .list_p {
            // display: inline-block;
            padding: 4px 0;
            cursor: pointer;
          }
        }
        .list_addbot {
          cursor: pointer;
          .rbottom();
          .cen();
          margin-bottom: 14px;
        }
        .conleftsearch();
      }
    }
    .con_cen {
      position: relative;
      width: calc(100vw - 620px);
      height: 100%;
      // overflow: auto;
      .container_button {
        position: absolute;
        right: 10px;
        left: 10px;
      }
      // .cen();
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 7px;
        background-color: #fff;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // box-shadow: inset 0 0 6px rgb(86, 82, 82);
        background: rgb(186, 180, 180);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgb(86, 82, 82);
        border-radius: 10px;
        // background: #fff;
      }
      // .divDJ();
      #container {
        // max-height: 100%;
        // max-width: 100%;
        // background: #fff;
        position: relative;
        .stagemask {
          position: absolute;
          z-index: 9999;
          width: 100%;
          height: 100%;
          background: rgba(51, 49, 49, 0.766);
        }
      }
    }
    .con_right {
      .conright();
    }
  }
  .stage {
    background: #fff;
  }
}
</style>